import React, { Component } from 'react';
import InvoiceType from '@/components/invoiceType';
import InvoiceStatus from '@xforceplus/invoice-status';
import '@xforceplus/invoice-status/dist/index.css';
import { Drawer, Card, Row, Col, Tooltip, Table, Icon, Button, Popover } from 'antd';
//------------------------------------------------
// mapping ro func
import { conversion, formatMyCurrency } from '../moduleUtils'
import { tipDetail } from '../mapping.js';
//------------------------------------------------
import './tosend.scss'

class DetailDawer extends Component {
  state = {
    columns: [
      {
        key: 'code',
        dataIndex: 'code',
        render: (text, record) => {
          // console.log(`record-------->`, record)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('batchNo', 'bussinessNo', record, tipDetail, view)
              break;
            case 2:
              conversion('invoiceNo', 'invoiceCode', record, tipDetail, view)
              break;
            case 3:
              conversion('attachmentName', '', record, tipDetail, view)
              break;
            case 4:
              conversion('invoiceNo', 'invoiceCode', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'invoice',
        key: 'invoice',
        render: (text, record) => {
          // console.log(`record-------->`, record)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('', '', record, tipDetail, view)
              break;
            case 2:
              conversion('invoiceType', 'invoiceSheet', record, tipDetail, view)
              break;
            case 3:
              conversion('', '', record, tipDetail, view)
              break;
            case 4:
              conversion('invoiceType', 'invoiceSheet', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <InvoiceType type={view.tRecord} key={'1'} />
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <InvoiceStatus status={view.bRecord === 2 ? 3 : view.bRecord} type="INVOICE_JOINTS" />{/*-----------记账联定向到抵扣联----------*/}
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'type',
        key: 'type',
        render: (text, record) => {
          record.amountWithTax = formatMyCurrency(record.amountWithTax, 2)
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('bussinessType', 'amountWithTax', record, tipDetail, view)
              break;
            case 2:
              conversion('amountWithTax', 'paperDrewDate', record, tipDetail, view)
              break;
            case 3:
              conversion('', '', record, tipDetail, view)
              break;
            case 4:
              conversion('detailNum', 'paperDrewDate', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'company',
        key: 'company',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 2:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 3:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
            case 4:
              conversion('senderCompanyName', 'receiverCompanyName', record, tipDetail, view, record.senderRole)
              break;
          }
          return (<Row>
            <Col>
              {view.tFlag ? <React.Fragment>
                <span>{view.tInfo}：</span>
                <span>{view.tRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
            <Col>
              {view.bFlag ? <React.Fragment>
                <span>{view.bInfo}：</span>
                <span>{view.bRecord}</span>
              </React.Fragment> : <span>-</span>}
            </Col>
          </Row>
          )
        },
      }, {
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => {
          const view = {}
          switch (record.interfaceType) {
            case 1:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 2:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 3:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
            case 4:
              conversion('receiverName', 'principalName', record, tipDetail, view)
              break;
          }
          return (<Row>
            <Popover placement="topLeft" content={<div><p>{record.receiverName}  {record.receiverTel || '--'}</p><p>{record.receiverAddr}</p></div>} arrowPointAtCenter>
              <Col>
                {view.tFlag ? <React.Fragment>
                  <span>{view.tInfo}：</span>
                  <span className="text-overflow" style={{maxWidth:'70px'}}>{view.tRecord}</span>
                </React.Fragment> : <span>-</span>}
              </Col>
              <Col>
                {view.bFlag ? <React.Fragment>
                  <span>{view.bInfo}：</span>
                  <span>{view.bRecord}</span>
                </React.Fragment> : <span>-</span>}
              </Col>
            </Popover>
          </Row>
          )
        },
      }
    ]
  }


  render() {
    const { visible, dataSource, onClose } = this.props;
    const { columns } = this.state;

    return (
      <Drawer
        className="detail-drawer"
        placement="right"
        width={'100%'}
        closable={false}
        onClose={onClose}
        visible={visible}
      >
        <Card className="drawer-top">
          <Row type="flex" justify="space-between">
            <Col span={20}>
              <Row type="flex" justify="start">
                <Col className="list-btm">
                  <span className="list-radius"></span>包裹
                                    <span>批次封面：<span className="color-primary">{dataSource.goodsCountInfo.coverCount}</span>个</span>
                  <span>发票联：<span className="color-primary">{dataSource.goodsCountInfo.invoiceSheet1Count}</span>张</span>
                  <span>抵扣联：<span className="color-primary">{dataSource.goodsCountInfo.invoiceSheet2Count}</span>张</span>
                  <span>附件：<span className="color-primary">{dataSource.goodsCountInfo.attachmentCount}</span>个</span>
                  <span>销货清单：<span className="color-primary">{dataSource.goodsCountInfo.salesBillCount}</span>个</span></Col>
              </Row>
            </Col>
            <Col className="text-right color-primary" span={4}><span className="span-back" onClick={onClose}>返回</span></Col>
          </Row>
        </Card>
        <Table
          // scroll={{ y: 300 }}
          rowKey="id"
          showHeader={false}
          columns={columns}
          pagination={false}
          dataSource={dataSource.goodsItemInfo} />


      </Drawer>
    );
  }
}

export default DetailDawer;
